<!-- TabBarItem -->
<template>
  <div class="tab-bar-item"
       @click="itemClick">
    <slot v-if="!isActive"
          name="item-icon"></slot>
    <slot v-else
          name="item-icon-active"></slot>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    path:String,
    activeColor:{
      type:String,
      default:'pink'
    }
  },
  data () {
    return {
      // isActive: true
    }
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    isActive(){
      return this.$route.path.indexOf(this.path)!==-1;
    },
    activeStyle(){
      return this.isActive ? {color:this.activeColor} :{}
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  methods: {
    itemClick () {
      console.log('itemClick');
      this.$router.replace(this.path)
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img {
  height: 24px;
  width: 24px;
}
.active{
  color: #f50976;
}
</style>